<template>
	<div class="rule_manage">
		<!--上边-->
		<div class="head">
			<div style="float:left">
				<el-form :inline="true" :model="filters"  ref="filters" :rules="rules" class="demo-form-inline">
					<el-form-item label="规则名称" prop="names">
						<el-input v-model="filters.names" placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="规则状态" prop="state">
						<el-select v-model="filters.state" placeholder="请选择">
							<el-option label="已启用" value="已启用"></el-option>
							<el-option label="未启用" value="未启用"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit('filters')">检索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div style="float:right;"> 
				<el-button type="primary" @click="dialogFormVisible = true">创建规则</el-button>
			</div>
		</div>
		
		<!--规则新增框-->
		<el-dialog  :visible.sync="dialogFormVisible">
		<el-form :model="form" :rules="rules" ref="form"  class="demo-ruleForm">
				<el-form-item label="规则名称" :label-width="formLabelWidth" prop="name">
					 <el-input v-model="form.name" type="text" auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
				<el-form-item  :label-width="formLabelWidth">
					 <span>支持中文,英文字母,数字和下划线,<br/>长度限制4-30，中文算两位</span>
				</el-form-item>
				<el-form-item label="数据格式" :label-width="formLabelWidth" prop="format">
						<el-radio v-model="form.format" label="Json" style="width:60%">Json</el-radio>
				</el-form-item>
				 <el-form-item label="规则描述" :label-width="formLabelWidth" prop="desc">
						<el-input v-model="form.desc" type="textarea" auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('form')">确 定</el-button>
			</div>
		</el-dialog>
			<!--中间内容-->
		<el-table
				:data="tableData"
				style="width:90%; margin:0 auto;"
				border
				 v-loading="listLoading"
			:header-cell-class-name="tableheaderClassName"
			:row-class-name="tableRowClassName">
				<el-table-column 
							prop="name"
						label="规则名称">
					</el-table-column>
					<el-table-column
						prop="format"
						label="数据格式">
					</el-table-column>
					<el-table-column
						prop="desc"
						label="规则描述">
					</el-table-column>
					<el-table-column
						prop="date"
						label="创建时间">
					</el-table-column>
					 <el-table-column
						prop="state"
						label="状态">
					</el-table-column>	
				<el-table-column
					fixed="right"
					label="操作"
					header-align="center">
					<template slot-scope="scope">
							<el-button   @click="guanLi(scope.row)"  size="small" type="text">
								<span style="color:#212121">管理</span>
							</el-button>
									<el-button v-if="(scope.row.state) ==='未启动'"  @click="handleClick(scope.row)" type="text" size="small" >
										<span >启动</span>
									</el-button>
									<el-button v-if="(scope.row.state) ==='已启动'"  @click="stopClick(scope.row)" type="text" size="small" >
										<span >停止</span>
									</el-button>
							<el-button   @click="deldata(scope.row)" type="text" size="small" ><span >删除</span>
							</el-button>
					</template>
				</el-table-column>    
		 </el-table>
		<guanli></guanli>
		 <!--底部内容-->
		<div class="di">
			<div style="float:right;width:30%">
				<el-pagination
						background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
						:total="total">
				</el-pagination>
			</div>
		</div>	
</div>
</template>
<script>
import bus from '../../eventBus.js'
import guanli from './guanli.vue'
import util from '../../common/js/date.js';
import { getUserListPage, removeUser,  addUser } from '../../api/fictitious.js';
export default {
	name:'manage',
	components: {
		guanli,
	},
	data() {
		return {
			filters:{
				names:null,
				state:null
			},
			page: 1,
			total: 0,
			biao:"规则管理",
			guanli:true,
			listLoading:false,
			rules:{
				name:[
					{required:true,message:'名称不能为空！',trigger:'blur'},
					{min:3,max:12,message:'名称长度须在3-12之间',trigger:'blur'}
				],
				desc:[
					{required:true,message:'设备描述不能为空',trigger:'blur'},
					{min:3,max:50,message:'设备描述长度不正确',trigger:'blur'}
				],
				format:[{required:true,message:'请选择数据格式',trigger:'change'}],
				state:[{required:true,message:'请选择规则状态',trigger:'change'}]
			},
			tableData: [ ],   
			dialogFormVisible: false,
			form: {
				biao:'规则管理',
				name: null,
				desc: null,
				format: null,
				state:'未启动',
				date: new Date()
			},
			form1: {
				name: '',
				format: '',
				desc: ''
			},
			formLabelWidth: '120px'
		};
	},
	methods:{
		//获取用户列表
		getUsers() {
			let para = {
				page: this.page,
				name: this.filters.names,
				state:this.filters.state,
				table:this.biao,
			};
			this.listLoading = true;
			getUserListPage(para).then((res) => {
				this.total = res.data.total;
				this.tableData = res.data.rules_manage;	
				for(var i=0;i<this.tableData.length;i++){
					this.tableData[i].date = util(this.tableData[i].date)
					// var date = new Date(this.tableData[i].date);
					// var time1 = date.getTime();
					// this.tableData[i].date = util(time1)
				}				
				this.listLoading = false;
			});
		},
		//信息搜索提交按钮
		onSubmit(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					var str=this.filters.names;
					var re =/[`~!@#$%^&*_+<>{}'[\]]/im;
					if (re.test(str)){
						this.$message({
							message: '不能有特殊字符',
							type: 'warning'
						});
					}else{
						this.getUsers();
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		// 分页获取
		handleCurrentChange(val) {
			this.page = val;
			this.getUsers();
		},
		//信息新增确认按钮
		submitForm(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.addLoading = true;
					let para = Object.assign({}, this.form);
					console.log(this.form);
					addUser(para).then(() => {
						this.addLoading = false;
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.$refs['form'].resetFields();
						this.dialogFormVisible = false;
						this.getUsers();
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		//点击启动按钮触发事件
		handleClick(row) {
			this.$confirm(row.name, '确认启动', {
				confirmButtonText: '是',
				cancelButtonText: '否',
				type: 'warning',
				center: true
			}).then(( ) => {
				row.state="已启动";  
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		//点击停止按钮触发事件
		stopClick(row) {
			this.$confirm(row.name, '确认停止', {
				confirmButtonText: '是',
				cancelButtonText: '否',
				type: 'warning',
				center: true
			}).then(( ) => {
				row.state="未启动";  
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		deldata(row){
			this.delWindow=true;
			this.$confirm('确认要删除吗？', '提示', {
				confirmButtonText: '是',
				cancelButtonText: '否',
				type: 'warning',
				center: true
			}).then(() => {
				this.listLoading = true;
				console.log(row);
				let para = { id: row.id, table:"规则管理" };
				console.log(para);
				removeUser(para).then(() => {
					this.listLoading = false;
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.getUsers();
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		guanLi(row){
			bus.$emit("guanli",true,);
			sessionStorage.setItem('RuleManagement', JSON.stringify(row));
		},
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {	        	
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
	},
	mounted() {
		this.getUsers();
	}
};
</script>
<style scoped>
	.rule_manage{width:100%;}

	.rule_manage .di{width:77.8%;margin-left:0px;position:relative;left:6%; bottom:10%;line-height:36px;margin-top: 30px; }

	.rule_manage #guan_li .el-dialog{
		width:80%;
	}
	.rule_manage .head{
	overflow: hidden;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 20px;
	}
</style>
